<template>
	<view class="">
		<uniNavBar leftWidth="300rpx" >
			<!-- <block slot="left">
				<view class="navAvator">
					<image v-if="avatar" style="width: 60rpx;height: 60rpx;" :src="avatar" mode=""></image>
				</view>
				<text>尊敬的会员你好!</text>
			</block> -->
			
		</uniNavBar>
		
		<swiper
			class="screen-swiper square-dot" 
			style="width: 96%;margin: 0 auto;"
			circular="true" 
			indicator-color="#ffffff"
			indicator-active-color="#0f72ff"
			indicator-dots="true" 
			autoplay="true"
			interval="5000" 
			duration="500">
			<swiper-item v-for="(item, index) in carouselList" :key="index" @click="navToAdvUrls(item)">
				<image :src="weburl + item.path" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		
		
		<view class="" >
			<uni-grid 
				:column="5" 
				:showBorder="false">
				
				<uni-grid-item >
					<view @click="navToUrl('/pages/user/fanzha')" class="grid-item-box" style="background-color: #fff;">
						<image style="width: 30px; height: 30px;"  mode="aspectFit" src="/static/img/aqiang/shimingrenzheng.png" ></image>
						<text style="margin-top: 10px;font-size: 24rpx" class="text">实名管理</text>
					</view>
				</uni-grid-item>
				
				<uni-grid-item >
					<view @click="navToUrl('/pages/user/userinfo')" class="grid-item-box" style="background-color: #fff;">
						<image style="width: 30px; height: 30px;"  mode="aspectFit" src="/static/img/aqiang/zhanghuyue.png" ></image>
						<text style="margin-top: 10px;font-size: 24rpx;" class="text">账户管理</text>
					</view>
				</uni-grid-item>
				
				<uni-grid-item >
					<view @click="navToUrl('/pages/invest/index')" class="grid-item-box" style="background-color: #fff;">
						<image style="width: 30px; height: 30px;"  mode="aspectFit" src="/static/img/aqiang/licai.png" ></image>
						<text style="margin-top: 10px;font-size: 24rpx" class="text">版权认购</text>
					</view>
				</uni-grid-item>
				<uni-grid-item >
					<view @click="navToUrl('/pages/bank/index')" class="grid-item-box" style="background-color: #fff;">
						<!-- <uni-icons type="image"  :size="30" color="#777" /> -->
						<image style="width: 30px; height: 30px;"  mode="aspectFit" src="/static/img/aqiang/yinhangka.png" ></image>
						<text style="margin-top: 10px;font-size: 24rpx" class="text">绑定银行卡</text>
					</view>
				</uni-grid-item>
				<uni-grid-item >
					<view @click="navToUrl('/pages/help/rengou')" class="grid-item-box" style="background-color: #fff;">
						<!-- <uni-icons type="image"  :size="30" color="#777" /> -->
						<image style="width: 30px; height: 30px;"  mode="aspectFit" src="/static/img/aqiang/liucheng.png" ></image>
						<text style="margin-top: 10px;font-size: 24rpx" class="text">认购流程</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		
		<view class="padding">
			<video
				style="width: 100%;height: 400rpx;"
				object-fit="cover" 
				src="https://thomasinebeckham.oss-cn-hongkong.aliyuncs.com/mp4/xuanchuan.mp4">
			</video>
		</view>
		
		
		<uni-section title="更多推荐" type="line"></uni-section>
		
		<view class="" style="padding: 20rpx;display: flex;">
			<view v-for="(item,index) in recommendList" v-if="index==0" :key="index"  class="" style="width: 50%;border-right: 1rpx solid #ccc;">
				<view @click="navToUrl('/pages/invest/details?code='+item.id)" class="" style="display: flex;">
					<view class="img_box" style="width: 160rpx;height: 160rpx;background-color: #eee;">
						<image style="width: 100%;height: 100%;" :src="weburl+item.img" mode=""></image>
					</view>
					<view class="" style="color: #999;padding-left: 20rpx;font-size: 24rpx;">
						<view style="color: cornflowerblue;font-size: 40rpx;" class="">新品推荐</view>
						<view class="">{{item.day}}天定期</view>
						<view class="">中低风险</view>
					</view>
				</view>
				
				<view class="" style="margin-top: 40rpx;color: #999;position: relative;width: 100%;">
					<view class="" style="position: absolute;top: -10rpx;">七日年化</view>
					<view style="font-size: 60rpx;" class="">{{parseFloat(item.apr).toFixed(2)}}%</view>
				</view>
			</view>
		
			<view class="" style="width: 50%;padding-left: 20rpx;color: #999;">
				<view v-for="(item,index) in recommendList" v-if="index > 0" :key="index" @click="navToUrl('/pages/invest/details?code='+item.id)" class="" style="display: flex;justify-content: space-between;border-bottom: 1rpx solid #999;">
					<view class="">
						<view class="">{{item.type}}</view>
						<view class="" style="font-size: 36rpx;">{{parseFloat(item.apr).toFixed(2)}}%</view>
						<view class="">{{item.min}}元起购</view>
					</view>
					
					<view class="" style="width: 100rpx;height: 140rpx;background-color: #eee;">
						<image style="width: 100%;height: 100%;" :src="weburl+item.img" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<tabBar :currentPage="currentPage"></tabBar>
	</view>
</template>

<script>
	import uniNavBar from '@/uni_modules/uni-nav-bar2/components/uni-nav-bar/uni-nav-bar.vue'
	import tabBar from '@/components/tabBar/tabBar.vue';
	export default {
		components: {
			tabBar,
			uniNavBar
		},
		data() {
			return{
				currentPage: "/pages/invest/hot",
				swiperLength: 0,
				carouselList: [],
				recommendList:[],
				info: {},
				userinfo: {
					avatar: ''
				},
				avatar:""
			}
		},
		onLoad: function(option) {
			this.loadBanners();
			this.info = uni.getStorageSync('userinfo');
			this.getData();
			this.moreRecommend();
		},
		onShow() {
			this.loadImg();
		},
		onPullDownRefresh() {
			this.page = 1,
			this.lastPage = 0,
			this.list = [],
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
			
			setTimeout(() => {
				this.moreRecommend();
			}, 300);
		},		
		methods:{
			//轮播图点击事件
			navToAdvUrls: function(e) {
				return uni.navigateTo({
					url: e.url
				});
			},
			navToUrl: function(url) {
			    uni.navigateTo({
			        url: url
			    })
			},
			
			//个人信息接口
			getData: function() {
				//获取基础参数
				uni.showLoading({
					title: "数据加载中",
					mask: true
				})
				var info = uni.getStorageSync("userinfo");
				if(!this.info || this.info == undefined || this.info == null){
					uni.navigateTo({
						url: '../login/login'
					})
				}
				if (info.token) {
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['username=' + info.username, 'token=' + info.token, 'timestamp=' +
						timestamp
					]);
					this.helper.req({
						api: "getUserInfo",
						timestamp: timestamp,
						data: {
							username: info.username,
							token: info.token
						},
						header: {
							sign: sign
						},
						method: 'GET',
					}).then(res => {
						this.userinfo = res.data.data.userinfo;
						if (this.userinfo.avatar) {
							this.avatar = this.weburl + this.userinfo.avatar;
						}
						setTimeout(() => {
							uni.hideLoading();
						}, 300);
						this.$forceUpdate()
					})
				} else {
					uni.hideLoading();
				}
			},
			moreRecommend:function(){
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token=' + info.token, 'timestamp=' + timestamp]);
				this.helper.req({
					api: "getInvestList",
					timestamp: timestamp,
					data: {
						token: info.token
					},
					header: {
						sign: sign
					},
					method: 'GET',
				}).then(res => {
					// console.log(res);
					this.recommendList = res.data.data.list.data;
					uni.stopPullDownRefresh();
					uni.hideLoading();
				});
			},
			// 获取顶部img
			loadImg: function() {
				var range = Math.round(Math.random() * (99999 - 11111)) + 11111;
				this.avatar = this.weburl + '/storage/upload/icon_avatar.png?k=' + range;
			},
			
			loadBanners: function() {
				uni.showLoading({
					title: "数据加载中",
					mask: true
				})
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['type=invest', 'timestamp=' + timestamp]);
				this.helper.req({
					api: "getBanners",
					timestamp: timestamp,
					data: {
						type: 'invest'
					},
					header: {
						sign: sign
					},
					method: 'GET',
				}).then(res => {
					// console.log(res);
					this.carouselList = res.data.data.list;
					this.swiperLength = this.carouselList.length;
					uni.hideLoading();
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #fff;
	}
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
</style>